
 /* 文字滚动 */
 @keyframes aniMove1 {
  0% { transform: translateX(100vh); }
  100% { transform: translateX(-100%); }
 }
 /* 文字滚动 */
 @keyframes aniMove2 {
   0% { transform: translateX(100vw); }
   100% { transform: translateX(-100%); }
 }
 
 /* 抖动字幕效果 */
 @keyframes aniShake {
  0%, 33% { text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; }
  34%, 66% { text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; }
  67%, 100% { text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; }
 }

.handsBarrage {
  background: #000;
  width: 100vh;
  height: 100vw;
  display: flex;
  align-items: center;
  transform: rotate(90deg);
  transform-origin: 50vw 50vw;
  overflow: hidden;
  .scrollText {
    width: fit-content;
    white-space: nowrap;
    color: #ffffff;
    font-size: 100px;
    animation-fill-mode: forwards;
    &.scroll {
      transform: translateX(100vh);
      animation: aniMove1 var(--time) linear infinite;
    }
    &.bounce {
      padding-left: 120px;
      padding-right: 120px;
      animation: aniShake 300ms linear infinite;
      text-align: center;
      width: 100vh;
      white-space: pre-wrap;
      word-break: break-all;
    }
    &.static {
      padding-left: 120px;
      padding-right: 120px;
      text-align: center;
      white-space: pre-wrap;
      word-break: break-all;
      width: 100vh;
    }
  }
  &.noRotate {
    transform: rotate(0deg);
    width: 100vw;
    height: 100vh;
    .scrollText {
      &.scroll {
        transform: translateX(100vw);
        animation: aniMove2 var(--time) linear infinite;
      }
      &.bounce {
        width: 100vw;
      }
      &.static {
        width: 100vw;
      }
    }
  }
}

